<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="front-common :: commonCss(~{::title},~{},~{},~{::style})">
    <title>hr信息</title>
    <style type="text/css">
        .container{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            border: #f8f8f8 30px solid;
            padding: 0;
        }
        .content{
            background-color: #ffffff;
            float: right;
            min-height: 75vh;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="front-common::header('information')"></div>

    <div class="layui-layout-body" style="margin-top: 50px;background-color: #f8f8f8;">
        <div class="layui-container container">
            <div th:replace="front-common::manageSide('hr')"></div>
            <div class="content">
                <div class="layui-fluid">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                        <legend>管理岗位</legend>
                    </fieldset>
                    <div class="layui-form" style="padding: 0 60px 0 60px;">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" id="publishBtn" class="layui-btn layui-btn-normal">发布新岗位</button>
                                <button type="button" id="unpublishBtn" class="layui-btn layui-btn-danger">停止岗位招聘</button>
                            </div>
                        </div>
                    </div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                        <legend>hr信息</legend>
                    </fieldset>
                    <form class="layui-form layui-form-pane" id="hrInfoForm" lay-filter="hrInfoForm" action="" style="padding: 0 60px 0 60px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-block">
                                <input name="name" lay-verify="required" type="text" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <select name="sex" lay-search lay-verify="required">
                                    <option th:each="sex,stat:${application.sexList}"
                                            th:text="${sex.value}" th:attr="checked=${stat.first}"
                                            th:value="${sex.value}" ></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-input-block">
                                <input name="age" lay-verify="required|number" type="text" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">职位</label>
                            <div class="layui-input-block">
                                <input name="position" disabled type="text" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" lay-filter="submit" lay-submit class="layui-btn">立即提交</button>
                                <button type="button" id="resetBtn" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div th:replace="front-common::footer"></div>
    </div>

</div>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">取消发布</a>
</script>
<script th:inline="javascript">
    layui.use(['form','table'], function() {
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;

        form.val("hrInfoForm", {
            "name": [[${hrInfo==null?'':hrInfo.name}]]
            , "sex": [[${hrInfo==null?'':hrInfo.sex}]]
            , "age": [[${hrInfo==null?'':hrInfo.age}]]
            , "position": [[${hrInfo==null?'':hrInfo.position}]]
        });
        $("#resetBtn").click(function (){
            form.val("hrInfoForm", {
                "name": [[${hrInfo==null?'':hrInfo.name}]]
                , "sex": [[${hrInfo==null?'':hrInfo.sex}]]
                , "age": [[${hrInfo==null?'':hrInfo.age}]]
                , "position": [[${hrInfo==null?'':hrInfo.position}]]
            });
        })

        form.on('submit(submit)', function(data){
            $.ajax({
                url: '/hr/updateInfo/}]]+[[${hrInfo.id',
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (n){
                    if(n.success){
                        layer.msg("修改成功");
                    }else {
                        layer.msg("修改失败，请稍后再试（"+n.msg+")");
                    }
                },
                error: function (n){
                    layer.msg("修改失败,"+n.responseJSON.msg);
                }
            });
            return false;
        });

        form.on('select(save-province)', function(data){
            $("#save-city").html("");
            $.ajax({
                url: '/dictionary/getCityList/'+data.value,
                type:"get",
                dataType:"json",
                success:function (data){
                var html = "";
                $.each(data,function (i,n){
                    html += "<option value='"+n.city+"'>"+n.city+"</option>";
                });
                $("#save-city").html(html);
                form.render(null,"saveJobInfoForm");
            }
        });
            form.render(null,"saveJobInfoForm");
        });
        form.on('select(save-type)', function(data){
            $("#save-business").html("");
            $.ajax({
                url: '/dictionary/getBusinessList/'+data.value,
                type:"get",
                dataType:"json",
                success:function (data){
                var html = "";
                $.each(data,function (i,n){
                    html += "<option value='"+n.business+"'>"+n.business+"</option>";
                });
                $("#save-business").html(html);
                form.render(null,"saveJobInfoForm");
            }
        });
            form.render(null,"saveJobInfoForm");
        });
        
        $("#publishBtn").click(function (){
            layer.open({
                type: 1,
                area: ['800px', '560px'],
                shadeClose: true, //点击遮罩关闭
                title: '发布岗位',
                btn: ['确定', '取消'],
                content: $('#saveJobFrame'),
                yes: function (index, layero){
                    var job = $.trim($("#save-job").val());
                    var salary = $.trim($("#save-salary").val());
                    var education = $.trim($("#save-education").val());
                    var address = $.trim($("#save-address").val());
                    var description = $.trim($("#save-description").val());
                    var type = $("#save-type").find("option:selected").text();
                    var business = $.trim($("#save-business").find("option:selected").val());
                    var province = $("#save-province").find("option:selected").text();
                    var city = $.trim($("#save-city").find("option:selected").text());
                    if(job==='' ||salary===''||education===''||address===''||description===''||business===''||city===''){
                        layer.msg("请完善岗位全部信息",{icon:'5'});
                        return false;
                    }

                    var formFile = new FormData(document.getElementById('saveJobInfoForm'));
                    formFile.set("business",type+"-"+business);
                    formFile.append("area",province+"-"+city);
                    $.ajax({
                        url : [[@{/job/publish/{companyId}/{hrId}(companyId=${hrInfo.companyId},hrId=${hrInfo.id})}]],
                        type : 'post',
                        dataType : 'json',
                        data : formFile,
                        contentType:false,
                        processData:false,
                        success : function(n) {
                            if (n.success) {
                                layer.msg("发布岗位成功");
                                layer.close(index);
                            }else {
                                layer.msg("发布岗位失败,"+n.msg);
                            }
                        },
                        error:function (n){
                            layer.msg("发布岗位失败,"+n.responseJSON.msg);
                        }
                    });
                },
                end: function (res) {
                    $("#saveJobFrame").css("display",'none');
                }
            });
        })
        
        $("#unpublishBtn").click(function (){
            layer.open({
                type: 1,
                area: ['880px', '500px'],
                shadeClose: true,
                title: '已发布的岗位',
                content: $('#jobFrame'),
                success: function () {
                    table.render({
                        elem: '#jobTable'
                        , url: '/job/getByConditionInHr/'+[[${hrInfo.id}]]
                        , defaultToolbar: []
                        , page: true
                        , limits: [4, 8]
                        , limit: 8
                        , width: 880
                        , cols: [
                            [
                                {field: 'id', title: 'ID', hide: true}
                                , {field: 'job', width:200, title: '岗位名'}
                                , {field: 'business', width:125, title: '岗位类型'}
                                , {field: 'education', width:88, title: '学历要求'}
                                , {field: 'experience', width:88, title: '工作经验'}
                                , {field: 'salary', width:88, title: '工资'}
                                , {field: 'area', width:150, title: '工作地区'}
                                , {field: 'address', width:150, title: '详细地址'}
                                , {field: 'description', width:150, title: '描述'}
                                , {field: 'createTime', width:110, title: '发布时间',sort:true}
                                , {field: 'createHrId', width:75, title: 'HRid', hide: true}
                                , {field: 'companyId', width:75, title: '公司id', hide: true}
                                , {title: '操作', width:90, fixed: 'right',  toolbar: '#bar'}
                            ]
                        ]
                    });
                },
                end: function (res) {
                    $("#jobFrame").css("display",'none');
                    $("#jobTable").css("display",'none');
                }
            });
        });

    })

</script>
</body>

<div style="display:none;display: flex;align-items: center;justify-content: center;" id="jobFrame">
    <table style="display:none" class="layui-hide" id="jobTable" lay-skin="line" lay-filter="jobTable">
    </table>
</div>

<div style="display:none;" id="saveJobFrame">
    <form class="layui-form layui-form-pane" id="saveJobInfoForm" lay-filter="saveJobInfoForm" style="padding: 30px;">
        <div class="layui-form-item">
            <label class="layui-form-label">岗位名</label>
            <div class="layui-input-block">
                <input name="job" id="save-job" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">期望薪资</label>
            <div class="layui-input-block">
                <input name="salary" id="save-salary" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">学历要求</label>
                <div class="layui-input-inline">
                    <select name="education" id="save-education" lay-search>
                        <option th:each="education,stat:${application.educationList}"
                                th:text="${education.value}"
                                th:value="${education.value}" >
                        </option>
                    </select>
                </div>
                <label class="layui-form-label">工作经验</label>
                <div class="layui-input-inline">
                    <select id="save-experience" name="experience" lay-search>
                        <option th:each="experience,stat:${application.experienceList}"
                                th:text="${experience.value}"
                                th:value="${experience  .value}" >
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline" style="margin-right:0">
                <label class="layui-form-label">岗位类型</label>
                <div class="layui-input-inline">
                    <select lay-search lay-filter="save-type" name="type" id="save-type">
                        <option value="">请选择岗位类型</option>
                        <option th:each="type,stat:${application.typeList}"
                                th:text="${type.type}"
                                th:value="${type.id}">
                        </option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select id="save-business" name="business" lay-search>
                    </select>
                </div>
                <div class="layui-form-mid" id="tips-business"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">工作地点</label>
                <div class="layui-input-inline">
                    <select lay-search lay-filter="save-province" name="province" id="save-province">
                        <option value="">请选择工作地点</option>
                        <option th:each="province,stat:${application.provinceList}"
                                th:text="${province.province}"
                                th:value="${province.id}">
                        </option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select id="save-city" name="city" lay-search>
                    </select>
                </div>
                <div class="layui-form-mid" id="tips-area"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block">
                <input name="address" id="save-address" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea id="save-description" name="description" placeholder="请输入内容" autocomplete="off" class="layui-textarea" ></textarea>
            </div>
        </div>
    </form>
</div>
</html>